<!DOCTYPE html>

<!-- 
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>OR | OH Komputasi.NET</title>
        <link rel="icon" type="image/png" href="img/favicon.png" />
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/carousel.css" rel="stylesheet">
        <link href="css/coba.css" rel="stylesheet">
        <link href="fonts/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet">

        <script src="js/jquery.js"></script>
        <script src="js/jquery.parallax-1.1.3.js"></script>
        <script src="js/jquery.localscroll-1.2.7-min.js"></script>
        <script src="js/jquery.scrollTo-1.4.6-min.js"></script>
        <script src="js/jquery.zoom.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <script>
            $(document).ready(function () {
                $('#nav').localScroll(800);
                $('#home').parallax("50%", 0.4);
                $('#OH').parallax("50%", 0.1);
                $('#OR').parallax("50%", 0.4);
                $('#about').parallax("50%", 0.3);

                $('#potoOH')
                        .wrap('<span style="display:inline-block;float: right;margin-right: 5%;"></span>')
                        .css('display', 'block')
                        .parent()
                        .zoom();

                $('#potoOH').zoom({url: 'img/OH.jpg'});
            })
        </script>
    </head>

    <body>
        <!-- NAVBAR -->
        <div class="overlay-blur"></div>
        <div id="nav"class="navbar navbar-fixed-top">
            <div class="navbar-header">
                <a href="index.php" class="navbar-brand">
                    <img src="img/logo.png" alt="KomNet Logo" />
                </a>
            </div>
            <nav class="navbar-collapse collapse" id="main-nav" role="navigation">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#OH">OPEN HOUSE</a></li>
                    <li><a href="#OR">OPREC</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#home" > <i class="fa fa-home fa-lg"></i></a></li>
                </ul>
            </nav>
        </div>
        <!-- END NAVBAR -->
        <div>
            <section id="home" data-type="parallax_section" data-speed="10">
                <article>
                    <!-- Carousel
================================================== -->
                    <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">

                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
                            <li data-target="#bs-carousel" data-slide-to="1"></li>
                            <li data-target="#bs-carousel" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item slides active">
                                <div class="slide-1"></div>
                                <div class="hero">
                                    <hgroup>
                                        <h1>Kami <br>Mengkaji</h1>        
                                        <h3>We Learn The Next</h3>
                                    </hgroup>
                                </div>
                            </div>
                            <div class="item slides">
                                <div class="slide-2"></div>
                                <div class="hero">        
                                    <hgroup>
                                        <h1>Kami Mengajar</h1>        
                                        <h3>We Share The Next</h3>
                                    </hgroup>       
                                </div>
                            </div>
                            <div class="item slides">
                                <div class="slide-3"><div class="overlay"></div></div>
                                <div class="hero">        
                                    <hgroup>
                                        <h1>Kami<br> Develop</h1>        
                                        <h3>We Build The Next</h3>
                                    </hgroup>
                                </div>
                            </div>
                        </div> 
                    </div>
                    <!-- /.carousel -->
                </article>
            </section>

            <section id="OH" data-type="parallax_section" data-speed="10">
                <article>
                    <div class="container" style="color: black;">
                        <br><br>
                        <div style="text-align: center">
                            <div>
                                <h1 style="font-size: 60px"><i class="fa fa-home fa-lg"></i>Open House<i class="fa fa-home fa-lg"></i></h1>
                            </div>
                            <h5>Komputasi.NET</h5>
                        </div>
                        <hr>
                        <div style="float: left">
                            <blockquote>
                                <p>Mau Tau Lebih Tentang Komputasi.NET?</p>
                                <p>Pas banget,Ini nih acaranya, <kbd>Open House</kbd> Komputasi.NET</p>
                                <p>Disini bakal dibahas segala macam hal tentang KomNet</p>
                                <p>Selain itu, bakal ada bocoran tentan OR KomNet 2015 juga lho</p>
                                <p>so, tunggu apalagi, langsung samperin aja acaranya</p>
                                <p><kbd>Hari___:</kbd><code>Kamis, 8-1-15</code></p>
                                <p><kbd>Waktu__:</kbd><code>Sesi 4, 16.15</code></p>
                                <p><kbd>Tempat_:</kbd><code>265-267</code></p>
                                <footer>KomNet Dev-Team</footer>
                            </blockquote>
                        </div>
                        <br><br>
                        <image src="img/OH.jpg" id="potoOH"style="float: right;
                               margin-right: 5%;
                               border: 10px solid gray;
                               width: 256px;height: auto;
                               box-shadow: 0 0 50px rgba(0,0,0,0.4);
                               -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.4);
                               -o-box-shadow: 0 0 50px rgba(0,0,0,0.4);
                               -moz-box-shadow: 0 0 50px rgba(0,0,0,0.4);"/>
                    </div>
                </article>
            </section>

            <section id="OR" data-type="parallax_section" data-speed="10">
                <article>
                    <div>
                        <img src="img/kemon.png" width="auto" height="700px" style="position: absolute;float: left"/>
                        <br><br><br><br>
                        <div class="container" style="color: white;">
                            <div class="blockquote-reverse">
                                <p>Open Recruitment KomNet</p>
                                <h1><i class="fa fa-recycle fa-spin"></i>COMING SOON<i class="fa fa-recycle fa-spin"></i></h1>
                                <footer>Komnet 2015</footer>
                            </div>
                        </div>
                    </div>
                </article>
            </section>

            <section id="about" data-type="parallax_section" data-speed="10">
                <!-- Footer -->
                <footer>
                    <div class="footer container">
                        <div class="row">
                            <div class="col-lg-10 col-lg-offset-1 text-center">
                                <h3><strong>Komputasi.NET</strong>
                                </h3>
                                <p>64C Ottista Raya<br>Jakarta Timur, Jakarta</p>
                                <ul class="list-unstyled">
                                    <li><i class="fa fa-envelope-o fa-fw"></i>  <a href="mailto:support@komputasi.net">support@komputasi.net</a>
                                    </li>
                                </ul>
                                <br>
                                <ul class="list-inline">
                                    <li> <a href="https://www.facebook.com/komputasi.net"> <i class="fa fa-facebook">   </i> </a> </li>
                                    <li> <a href="https://twitter.com/Kom_net/"> <i class="fa fa-twitter">   </i> </a> </li>
                                </ul>
                                </ul>
                                <p class="text-muted">Copyright &copy; Komputasi.NET 2015</p>
                            </div>
                        </div>
                    </div>
                </footer>
            </section>
        </div>

        <?php
        ?>
    </body>
</html>